import React, {FC, useContext, useEffect, useMemo, useState} from 'react';
import "./index.less";
import {Outlet} from "umi";
import {SearchPageContext} from "./common/SearchPageContext";
import {history, useLocation} from "@@/exports";
import BizSearchBar, {BizSearchType, searchTypeMap} from "@/pages/HomePage/BizSearchBar";
import queryString from "query-string";
import usePgSearch, {getLastQueryValue} from "@/pages/SearchPage/common/usePgSearch";


interface SearchPageProps {
}

const SearchPage: FC<SearchPageProps> = (props) => {
  const location = useLocation();

  const [searchText, setSearchText] = useState<string | undefined>("");
  const {currentSearch, searchType} = usePgSearch();

  useEffect(() => {
    setSearchText(getLastQueryValue(currentSearch, "searchText"))
  }, [location.pathname, currentSearch]);

  return (
    <SearchPageContext.Provider value={{}}>
      <div className={"search-page-container"}>
        {
          searchType && (
            <div className={"search-page-input-wrapper"}>
              <BizSearchBar
                showBizSearchBarExtra={false}
                searchText={searchText}
                onSearchTextChange={setSearchText}
                activeKey={searchType?.key}
                onActiveKeyChange={(val) => {
                  history.push({
                    pathname: searchTypeMap[val].path,
                    search: queryString.stringify({
                      searchText: searchText
                    })
                  });
                }}
              />
            </div>
          )
        }
        <div className={"search-page-content"}>
          <Outlet/>
        </div>
      </div>
    </SearchPageContext.Provider>
  );
};

export default SearchPage;
